<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>播放</title>
    <link rel="stylesheet" href="/index/css/common.css?v=10">
    <link rel="stylesheet" href="/index/css/index.css?v=11">
    <link rel="stylesheet" href="/index/css/movie_details.css?v=16">
    <script type="text/javascript" src="/index/js/jquery-3.4.1.min.js"></script>

    <!--    	<link rel="stylesheet" href="/index/css/video.css">-->
<!--    <link href="https://vjs.zencdn.net/7.5.5/video-js.css" rel="stylesheet"/>-->

</head>
<body>

{include file='common/header'}

<div class="movie-play">

    <div class="play-video" style="position: relative">


        <video autoplay
               id="my-video"
               class="video-js"
               controls
               preload="auto"
			   style="z-index:0;object-fit: fill;max-height:200px;"
			   controlslist="nodownload"
               poster="{$img_path}{$movie.image}"
               webkit-playsinline
               playsinline

        >
<!--            <source src="http://zj-movie.oss-cn-hangzhou.aliyuncs.com/video/%E5%8A%A8%E4%BD%9C/%E8%B6%85%E4%BD%93.mp4" type="video/mp4">-->
            <source src="{$img_path}{$section.url}" type="video/mp4">
            <source src="{$img_path}{$section.url}" type="video/ogg">
            <source src="{$img_path}{$section.url}" type="video/webm">
        </video>
<!--        <img src="" alt="" style="position: absolute;top:0;bottom:0;">-->
        <div class="vip">
            <img src="{$img_path}{$movie.image}" alt="">
            <p>亲，开通VIP会员继续观看</p>
            <a href="{:url('mine/level')}">马上开通</a>
        </div>

    </div>

    <div class="play-info">
        <h3>{$movie.movie_name}</h3>
        <div class="play-attr">
            <span> 类型：{foreach $movie['types'] as $v} {$v.type_name}  {/foreach} </span>
            <span>&nbsp;地区：{$movie.region}</span>
            <span> 年份：{$movie.year}</span>
        </div>
        <div>
            {foreach $sections as $v}
            <a href="{:url('play',['sid'=>$v['id']])}"  {if $section.id == $v.id} class="play-section" {/if} >{$v.section_name}</a>
           {/foreach}
        </div>
    </div>
</div>

<div class="movie-content">
    <div class="movie-header">
        <img src="/index/assets/icon/desc.png" alt="">
        <h3 class="type-name">剧情介绍</h3>
        <a class="more">更新时间： {$movie.update_time|date='Y-m-d'} </a>
        <p class="clear-float"></p>
    </div>
    <div class="movie-intro">
        {$movie.details|raw}
    </div>

</div>
{include file='common/rand_movie'}

{include file='common/menu'}


</body>
<!--<script type="text/javascript" src="/index/js/clipboard.min.js"></script>-->
<script src="/index/js/common.js?v=10"></script>
<!--<script src="/index/js/video.min.js?v=10"></script>-->
<!--<script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>-->
<script src="//cdn.jsdelivr.net/npm/eruda"></script>

<script type="text/javascript">
    eruda.init();
    $(function () {

        var video = document.getElementById('my-video');

        if('{$play_time}'){
            video.currentTime = parseInt('{$play_time}');
        }
        var playTime;

        var inter = setInterval(function(){
            //用秒数来显示当前播放进度
            playTime = Math.floor(video.currentTime);

            if('{$try_see}' > 0 && playTime>='{$try_see}'){
                // video.stop();
                // exitFullscreen();
                $('#my-video').remove();
                $('.vip').show();
                clearInterval(inter);
            }

            if(playTime%10==0 ){
                playRecord(playTime,parseInt(video.duration));
            }

        },1000);
        //使用事件监听方式捕捉事件
        video.addEventListener("timeupdate",function(){


        },false)
    })

    var flag = -1;

    //观看记录
    function playRecord(playTime,allTime){

        if(flag!=playTime){

            $.post('{:url("playRecord")}',{movie_id:'{$movie.id}',section_id:'{$section.id}',play_time:playTime,all_time:allTime},function(res){
                // flag = 0;
                flag=playTime;

            })
        }
    }

	// ele:全屏的对象
	function requestFullscreen(ele) {
		// 全屏兼容代码
		if (ele.requestFullscreen) {
			ele.requestFullscreen();
		} else if (ele.webkitRequestFullscreen) {
			ele.webkitRequestFullscreen();
		} else if (ele.mozRequestFullScreen) {
			ele.mozRequestFullScreen();
		} else if (ele.msRequestFullscreen) {
			ele.msRequestFullscreen();
		}
	}

    // 取消全屏
    function exitFullscreen() {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.webkitExitFullscreen) {
            document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        }
    }

</script>
</html>